@import "~element-ui/packages/theme-chalk/src/mixins/mixins";

@include b(button) {

  &:not(.el-button--info):not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--text):not(:disabled):not(.is-disabled):hover,
  &:not(.el-button--info):not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--text):not(:disabled):not(.is-disabled):focus {
    color: var(--color-primary);
    border-color: var(--color-primary-light-3);
    background-color: var(--color-primary-light-1);
  }

  &:not(.el-button--info):not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(:disabled):not(.is-disabled):active {
    color: var(--color-darken-primary-1);
    border-color: var(--color-darken-primary-1);
  }

  @include when(plain) {
    &.el-button--primary {
      &:hover,
      &:focus {
        background: $--color-white;
        border-color: var(--color-primary);
        color: var(--color-primary);
      }

      &:active {
        background: $--color-white;
        border-color: var(--color-darken-primary-1);
        color: var(--color-darken-primary-1);
      }
    }
  }

  @include when(active) {
    &.el-button--primary {
      color: var(--color-darken-primary-1);
      border-color: var(--color-darken-primary-1);
    }
  }
  @include m(primary) {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);

    &:hover,
    &:focus {
      color: #fff;
      background: var(--color-primary-light-8);
      border-color: var(--color-primary-light-8);
    }

    &:active {
      color: #fff;
      background: var(--color-darken-primary-1);
      border-color: var(--color-darken-primary-1);
    }

    &.is-active {
      color: #fff;
      background: var(--color-darken-primary-1);
      border-color: var(--color-darken-primary-1);
    }

    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
        color: #fff;
        background-color: var(--color-primary-light-5);
        border-color: var(--color-primary-light-5);
      }
    }

    &.is-plain {
      color: var(--color-primary);
      background: var(--color-primary-light-1);
      border-color: var(--color-primary-light-4);

      &:hover,
      &:focus {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: #fff;
      }

      &:active {
        background: var(--color-darken-primary-1);
        border-color: var(--color-darken-primary-1);
        color: #fff;
      }

      &.is-disabled {
        &,
        &:hover,
        &:focus,
        &:active {
          color: var(--color-primary-light-6);
          background-color: var(--color-primary-light-1);
          border-color: var(--color-primary-light-2);
        }
      }
    }
  }
  @include m(text) {
    border-color: transparent;
    color: var(--color-primary);
    background: transparent;

    &:hover,
    &:focus {
      color: var(--color-primary-light-8);
      border-color: transparent;
      background-color: transparent;
    }
    &:active {
      color: var(--color-darken-primary-1);
      border-color: transparent;
      background-color: transparent;
    }
    &.is-disabled,
    &.is-disabled:hover,
    &.is-disabled:focus {
      border-color: transparent;
    }
  }
}
